<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="核算详情"></el-page-header>
            <el-descriptions class="e-m-t-45" :column="2" title="出库单信息" border :labelStyle="{ width: '120px' }">
                <el-descriptions-item label="编号">{{ form.number }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <span class="color-warning" v-if="form.state == '待出库'">{{ form.state }}</span>
                    <span class="color-warning" v-if="form.state == '已装车'">{{ form.state }}</span>
                    <span class="color-warning" v-if="form.state == '已出库'">{{ form.state }}</span>
                    <span class="color-success" v-if="form.state == '已完结'">{{ form.state }}</span>
                    <span class="color-danger" v-if="form.state == '已取消'">{{ form.state }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="总出库重量">{{ form.weight }}KG</el-descriptions-item>
                <el-descriptions-item label="总出库价值">{{ form.amount.toFixed(2) }}元</el-descriptions-item>
                <!-- <el-descriptions-item label="回收站">{{form.packstation.name}}</el-descriptions-item> -->
                <el-descriptions-item label="运送小哥">{{ form.brother.name }}</el-descriptions-item>
                <el-descriptions-item label="运送车辆">{{ form.vehicletype }}({{ form.licenseplate }})</el-descriptions-item>
                <el-descriptions-item label="需求时间">{{ form.demandtime }}</el-descriptions-item>
                <el-descriptions-item label="出库时间">{{ form.delivertime }}</el-descriptions-item>
                <el-descriptions-item label="结单时间">{{ form.endtime }}</el-descriptions-item>

                <el-descriptions-item label="装车证明" v-if="form.loadingproves.length > 0">
                    <div class="images-list">
                        <div class="item" v-for="(item, index) in form.loadingproves" :key="index">
                            <el-image
                                style="width: 150px; height: 150px; border-radius: 6px;"
                                :src="fileURL + item"
                                :preview-src-list=[[fileURL+item]]
                                fit="cover"></el-image>
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="出库证明" v-if="form.deliverproves.length > 0">
                    <div class="images-list">
                        <div class="item" v-for="(item, index) in form.deliverproves" :key="index">
                            <el-image
                                style="width: 150px; height: 150px; border-radius: 6px;"
                                :src="fileURL + item"
                                :preview-src-list=[[fileURL+item]]
                                fit="cover"></el-image>
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="回执小票" v-if="form.endproves.length > 0">
                    <div class="images-list">
                        <div class="item" v-for="(item, index) in form.endproves" :key="index">
                            <el-image
                                style="width: 150px; height: 150px; border-radius: 6px;"
                                :src="fileURL + item"
                                :preview-src-list=[[fileURL+item]]
                                fit="cover"></el-image>
                        </div>
                    </div>
                </el-descriptions-item>

                <el-descriptions-item label="配送信息" span="2">
                    <div class="pack">
                        <div class="item">
                            <div class="name">{{ form.store.name }}({{ form.staff.name }})</div>
                            <div class="text">
                                <i class="el-icon-location"></i><span>{{ form.store.address }}</span>
                            </div>
                            <div class="text">
                                <i class="el-icon-phone"></i><span>{{ form.staff.mobile }}</span>
                            </div>
                        </div>
                        <i class="el-icon-sort icon"></i>
                        <div class="item">
                            <div class="name">{{ form.packstation.name }}</div>
                            <div class="text">
                                <i class="el-icon-location"></i><span>{{ form.packstation.address }}</span>
                            </div>
                            <div class="text">
                                <i class="el-icon-phone"></i><span>{{ form.packstation.telephone }}</span>
                            </div>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <h4>出库明细</h4>
            <div class="flex">
                <div class="e-flex-1">
                    <el-table :data="dataarr" :span-method="objectSpanMethod" stripe border style="width: 100%">
                        <el-table-column prop="large" label="类型" width="200">
                        </el-table-column>
                        <el-table-column prop="typenames" label="小类">
                        </el-table-column>
                        <el-table-column prop="weight" label="数量" width="200">
                            <template slot-scope="scope">
                                <span>{{ scope.row.weight }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <template v-if="form.packdetails.length > 0">
                <h4>小票明细</h4>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-table border :span-method="objmoney" :data="moneyarr" stripe style="width: 100%">
                            <el-table-column prop="large" label="类型" fixed width="80">
                            </el-table-column>
                            <el-table-column prop="typenames" label="小类" fixed width="80">
                            </el-table-column>
                            <el-table-column prop="number" label="磅单号">
                            </el-table-column>
                            <el-table-column prop="grossweight" label="毛重(KG)" width="100">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.isweighing ? scope.row.grossweight : '/' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="tareweight" label="皮重(KG)" width="100">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.isweighing ? scope.row.grossweight : '/' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="deductionweight" label="扣重(KG)" width="100">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.isweighing ? scope.row.grossweight : '/' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="deductionratio" label="扣点" width="100">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.isweighing ? scope.row.grossweight : '/' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="netweight" label="净重/数量" width="200">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.netweight }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="单价(元/KG)" width="100">
                            </el-table-column>
                            <el-table-column prop="amount" label="金额(元)" width="200">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </template>
            <template v-if="form.financeflow.state == '已核验'">
                <h4>核验信息</h4>
                <el-descriptions class="e-m-t-30" :column="2" border :labelStyle="{ width: '120px' }">
                    <el-descriptions-item
                        label="账号">{{ form.financeflow.account }}（{{ form.financeflow.payway }}）</el-descriptions-item>
                    <el-descriptions-item label="流水账号">{{ form.financeflow.flowaccount }}</el-descriptions-item>
                    <el-descriptions-item label="金额">{{ form.financeflow.incomeamount.toFixed(2) }}元</el-descriptions-item>
                    <el-descriptions-item label="上传资料">
                        <el-image :src="fileURL + form.financeflow.picvoucher" style="width:200px;height:200px"
                            :preview-src-list="[fileURL + form.financeflow.picvoucher]"></el-image>
                    </el-descriptions-item>
                    <el-descriptions-item label="关联核算单" v-if="form.financeflow.remarks">
                        {{ form.financeflow.remarks }}
                    </el-descriptions-item>
                </el-descriptions>
            </template>
            <el-form label-width="0" class="e-m-t-45">
                <el-form-item>
                    <el-button @click="goBack">返回</el-button>
                    <!-- <el-button type="primary" v-if="form.state == '已完结'">结算核验</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '核算详情' 
        }
    },
    data() {
        return {
            form: {
                packstation: {},
                brother: {},
                deliverdetails: [],
                loadingproves: [],
                deliverproves: [],
                endproves: [],
                packdetails: [],
                amount: 0,
                store: {},
                staff: {},
                packstation: {},
                financeflow: {}
            },
            dataarr: [],
            moneyarr: [],
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.getDetails(this.id)

    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        getDetails(id) { //获取详情
            this.$axios.get('/Admin/Finance/Views?id=' + id).then((res) => {
                console.log(res)
                this.form = res

                res.deliverdetails.forEach((item, index) => {
                    // console.log(item,"==>item", index ,'===>index')
                    item.details.forEach((i, x) => {
                        let obj = {}
                        obj.amount = i.amount
                        obj.price = i.price
                        // obj.averageprice = i.averageprice
                        // obj.id = i.id
                        obj.typenames = i.productname
                        obj.typepath = i.typepath
                        obj.typeremarks = i.typeremarks
                        obj.weight = i.weight
                        obj.large = item.names
                        obj.bigid = item.id
                        obj.isweighing = item.isweighing
                        this.dataarr.push(obj)
                        // console.log(i,"==>i", x ,'===>x')
                        // console.log(item,"==>item", index ,'===>index')
                    })
                })
                res.packdetails.forEach((item, index) => {
                    // console.log(item,"==>item", index ,'===>index')
                    item.details.forEach((i, x) => {
                        let obj = {}
                        obj.amount = i.amount
                        obj.deductionratio = i.deductionratio
                        // obj.averageprice = i.averageprice
                        // obj.id = i.id
                        obj.deductionweight = i.deductionweight
                        obj.grossweight = i.grossweight
                        obj.number = i.number
                        obj.weight = i.weight
                        obj.price = i.price
                        obj.netweight = i.netweight
                        obj.tareweight = i.tareweight
                        obj.typenames = i.productname
                        obj.typepath = i.typepath
                        obj.large = item.names
                        obj.bigid = item.id
                        obj.isweighing = item.isweighing
                        this.moneyarr.push(obj)
                        // console.log(i,"==>i", x ,'===>x')
                        // console.log(item,"==>item", index ,'===>index')
                    })
                })
            })
        },
        //合并类型格子
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // console.log(rowIndex, columnIndex,'ssss')
            console.log(row, 'aaaaa')
            let mergeLength = 1;//需要进行横纵合并的列
            if (columnIndex < mergeLength) {
                let finArray = [1, 1];
                // 处理行数据
                let num = 0
                let cgname = Object.keys(row)[7]//7是数字最后一项类型id
                if (rowIndex === 0 || row[cgname] !== this.dataarr[rowIndex - 1][cgname]) {
                    let rowspan = 1;
                    //   //计算需要进行合并操作的行
                    for (let i = 0; i < this.dataarr.length - 1; i++) {
                        // 只合并连续的
                        if (this.dataarr[i][cgname] === row[cgname] && this.dataarr[i + 1][cgname] === row[cgname]) {
                            rowspan++;
                        }
                    }
                    finArray[0] = rowspan;
                } else {
                    finArray[0] = 0;
                }
                return finArray
            }
        },
        //合并类型格子
        objmoney({ row, column, rowIndex, columnIndex }) {
            // console.log(rowIndex, columnIndex,'ssss')
            console.log(row, 'aaaaa')
            let mergeLength = 1;//需要进行横纵合并的列
            if (columnIndex < mergeLength) {
                let finArray = [1, 1];
                // 处理行数据
                let num = 0
                let cgname = Object.keys(row)[11]//7是数字最后一项类型id
                if (rowIndex === 0 || row[cgname] !== this.moneyarr[rowIndex - 1][cgname]) {
                    let rowspan = 1;
                    //   //计算需要进行合并操作的行
                    for (let i = 0; i < this.moneyarr.length - 1; i++) {
                        // 只合并连续的
                        if (this.moneyarr[i][cgname] === row[cgname] && this.moneyarr[i + 1][cgname] === row[cgname]) {
                            rowspan++;
                        }
                    }
                    finArray[0] = rowspan;
                } else {
                    finArray[0] = 0;
                }
                return finArray
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.images-list {
    display: flex;

    .item {
        padding-right: 15px;
        position: relative;

        .el-icon-error {
            position: absolute;
            top: -8px;
            right: 7px;
            font-size: 22px;
            color: var(--red);
            background: #fff;
            border-radius: 50%;
            cursor: pointer;

            &:hover {
                color: #f00;
            }
        }
    }
}

.pack {
    display: flex;
    align-items: center;

    .item {
        .name {
            font-size: 18px;
        }

        .text {
            color: var(--grey);
        }
    }

    .icon {
        font-size: 30px;
        padding: 0 40px;
        transform: rotate(90deg);
        color: var(--gray);
    }
}
</style>
